<template>
  <view class="home-container">
    <view class="header-container">
      <view class="left"></view>
      <view class="center">首页</view>
      <view class="right">晴/30℃</view>
    </view>
    <view class="main-container">
      <view class="topcolor-container"></view>
      <view class="swiper-container">
        <swiper
          class="swiper"
          :indicator-dots="true"
          :autoplay="true"
          :interval="2000"
          :duration="500"
        >
          <swiper-item v-for="banner in bannerList" :key="banner.id">
            <view class="swiper-item">
              <img :src="banner.imagesUrl" alt />
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="search-input-container" v-if="false">
        <view class="search-input">
          <view class="icon">
            <text class="iconfont icon-search"></text>
          </view>
          <input type="text" name="" id="">
        </view>
      </view>
      <view class="nav-container">
        <view class="nav">
          <view class="nav-item" @click="toPage('/pages/guide/index')">
            <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/index_slices/icon_01@3x.png'" alt />
            <text>到达指引</text>
          </view>
          <view class="nav-item" @click="toPage('/pages/scenic/index')">
            <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/index_slices/icon_02@3x.png'" alt />
            <text>景点概括</text>
          </view>
          <view class="nav-item" @click="toPage('/pages/other/periphery')">
            <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/index_slices/icon_03@3x.png'" alt />
            <text>周边</text>
          </view>
          <view class="nav-item" @click="toPage('/pages/items/index')">
            <view class="tag">火爆</view>
            <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/index_slices/icon_04@3x.png'" alt />
            <text>游园项目</text>
          </view>
        </view>
      </view>
      <view class="ad-container">
        <view class="ad-card" @click="toPage('/pages/other/poetry')">
          <view class="time">2020</view>
          <view class="title">阳陂湖诗词大赛</view>
        </view>
      </view>
      <view class="hiplay-container">
        <view class="title">
          <text>嗨玩阳陂湖</text>
          <text class="tag-message">
            <text class="tag">热门</text>
            <text class="message">200位达人深度挖掘</text>
          </text>
        </view>
        <view class="content">
          <view class="capsule">
            <view class="left" @click="toPage('/pages/vr/index')">
              <view class="title">VR游阳陂湖</view>
              <view class="message">科技引领美好生活</view>
            </view>
            <view class="right" @click="toPage('/pages/other/goodjob')">
              <view class="title">好人好事好景区</view>
              <view class="message">抗击疫情无忧出行</view>
            </view>
          </view>
        </view>
      </view>
      <view class="strategy-container">
        <view class="title">
          <text>旅游攻略</text>
          <text class="active" @click="toFindPage">更多</text>
        </view>
        <view class="content">
          <!-- <view v-for="strategy in strategyList" :key="strategy.id" class="item" @click="toPage('/pages/active/index?id=' + strategy.id)">
            <img :src="strategy.imageUrl" alt />
            <text class="title">{{ strategy.title }}</text>
            <text class="message">{{ strategy.info }}</text>
          </view> -->
          <view v-for="(strategy) in strategyList" :key="strategy.id" class="item" @click="toPage('/pages/strategy/index?id=' + strategy.id)">
            <basic-image :src="strategy.imageUrl" :error-src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/find_imgs/image_empty.png'" :mode="'aspectFill'" :costomer-style="{
              width: '100%',
              height: '70px',
              borderRadius: '10px'
            }" />
            <text class="title">{{ strategy.title | common_ellipsis(8) }}</text>
            <text class="message">{{ strategy.info | common_ellipsis(20) }}</text>
          </view>
        </view>
      </view>
      <view class="song-container" v-if="false">
        <view class="title">
          <text>大宋文化</text>
          <text class="active" @click="toFindPage">更多</text>
        </view>
        <scroll-view class="content" :scroll-x="true">
          <view class="item" @click="toPage('/pages/song/index')">
            <view class="bage">No.1</view>
            <img src="@/static/index_slices/20160824141001_XmEtU.jpeg" alt />
            <text class="title">湖畔景区</text>
            <text class="message">据您123.4公里</text>
          </view>
          <view class="item" @click="toPage('/pages/song/index')">
            <view class="bage">No.2</view>
            <img src="@/static/index_slices/20160824141001_XmEtU.jpeg" alt />
            <text class="title">湖畔景区</text>
            <text class="message">据您123.4公里</text>
          </view>
          <view class="item" @click="toPage('/pages/song/index')">
            <view class="bage">No.3</view>
            <img src="@/static/index_slices/20160824141001_XmEtU.jpeg" alt />
            <text class="title">湖畔景区</text>
            <text class="message">据您123.4公里</text>
          </view>
          <view class="item" @click="toPage('/pages/song/index')">
            <view class="bage">No.4</view>
            <img src="@/static/index_slices/20160824141001_XmEtU.jpeg" alt />
            <text class="title">湖畔景区</text>
            <text class="message">据您123.4公里</text>
          </view>
          <view class="item" @click="toPage('/pages/song/index')">
            <view class="bage">No.5</view>
            <img src="@/static/index_slices/20160824141001_XmEtU.jpeg" alt />
            <text class="title">湖畔景区</text>
            <text class="message">据您123.4公里</text>
          </view>
          <view class="item" @click="toPage('/pages/song/index')">
            <view class="bage">No.6</view>
            <img src="@/static/index_slices/20160824141001_XmEtU.jpeg" alt />
            <text class="title">湖畔景区</text>
            <text class="message">据您123.4公里</text>
          </view>
        </scroll-view>
      </view>
      <view class="active-container">
        <view class="title">
          <text>游园活动</text>
          <text class="active" @click="toFindPage">更多</text>
        </view>
        <view class="content">
          <!-- <view v-for="activity in activityList" :key="activity.id" class="item" @click="toPage('/pages/active/index?id=' + activity.id)">
            <img :src="activity.imageUrl" alt />
            <view class="message">
              <text class="title">{{ activity.title|common_ellipsis(10) }}</text>
              <text class="detail">{{ activity.info|common_ellipsis(40) }}</text>
            </view>
          </view> -->
          <view v-for="(activity) in activityList" :key="activity.id" class="item" @click="toPage('/pages/active/index?id=' + activity.id)">
            <basic-image :src="activity.imageUrl" :error-src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/find_imgs/image_empty.png'" :costomer-style="{
              width: '140px',
              height: '90px',
              marginRight: '15px',
              flexShrink: '0',
              borderRadius: '10px'
            }" />
            <view class="message">
              <text class="title">{{ activity.title|common_ellipsis(10) }}</text>
              <text class="detail">{{ activity.info|common_ellipsis(40) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from "vue";
import BasicImage from "@/components/basic-image/basic-image.vue";
export default Vue.extend({
  props: ["banner-list", "strategy-list", "activity-list"],
  components: { BasicImage },
  data() {
    return {
    };
  },
  onShow() {
  },
  methods: {
    toPage(path: string) {
      uni.navigateTo({
        url: path
      });
    },
    toFindPage() {
      this.$emit("to-find-page");
    }
  }
});
</script>
<style scoped>
.home-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.topcolor-container {
  width: 100%;
  height: 120px;
  position: absolute;
  top: 0;
  z-index: -1;
  overflow: hidden;
}

.topcolor-container::after {
  content: "";
  width: 140%;
  height: 120px;
  position: absolute;
  left: -20%;
  top: 0;
  z-index: -1;
  border-radius: 0 0 50% 50%;
  background: #006b65;
}

.header-container {
  color: #fff;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
  background: #006b65;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-container .right {
  flex-direction: row-reverse;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
  overflow: auto;
  position: relative;
}

.swiper-container {
  padding: 15px;
  padding-top: 0px;
}

.swiper-container .swiper {
  height: 40vw;
  border-radius: 5px;
  overflow: hidden;
}

.swiper-container .swiper .swiper-item img {
  width: 100%;
}

.nav-container {
  padding: 15px;
  padding-top: 0px;
}

.nav-container .nav {
  padding: 15px;
  display: flex;
  background: #ffffff;
  box-shadow: 0px 7px 16px 5px rgba(212, 220, 220, 0.52);
  border-radius: 10px;
}

.nav-container .nav .nav-item {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.nav-container .nav .nav-item .tag {
  color: #FFFFFF;
  font-size: 12px;
  padding: 0px 5px;
  background-color: #FF6666;
  border-radius: 4px;
  border-bottom-left-radius: 0px;
  position: absolute;
  top: -5px;
  right: -5px;
}

.nav-container .nav .nav-item img {
  width: 40px;
}

.nav-container .nav .nav-item text {
  color: #333333;
  font-size: 14px;
  margin-top: 5px;
}

.ad-container {
  padding: 15px;
  padding-top: 0px;
}

.ad-card {
  color: #FFFFFF;
  padding: 15px;
  display: flex;
  background: #006b65;
  box-shadow: 0px 7px 16px 5px rgba(212, 220, 220, 0.52);
  border-radius: 10px;
}

.strategy-container,
.active-container,
.song-container,
.hiplay-container {
  padding: 0px 15px;
  display: flex;
  flex-direction: column;
}

.strategy-container .title,
.active-container .title,
.song-container .title,
.hiplay-container .title {
  color: #333333;
  font-size: 13px;
  /* border-left: 5px solid #006b65; */
  margin-bottom: 15px;
  padding-left: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.strategy-container .title .active,
.active-container .title .active,
.song-container .title .active,
.hiplay-container .title .active {
  color: #666666;
  font-size: 12px;
}

.strategy-container .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.strategy-container .content .item {
  width: 30%;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.strategy-container .content .item img {
  width: 100%;
  border-radius: 10px;
}

.strategy-container .content .item .title {
  color: #333333;
  font-size: 14px;
  font-weight: bolder;
  padding: unset;
  margin: unset;
  border: unset;
}

.strategy-container .content .item .message {
  color: #666666;
  font-size: 8px;
}

.song-container .content >>> .uni-scroll-view-content {
  display: flex;
}

.song-container .content .item {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  margin-right: 15px;
  position: relative;
}

.song-container .content .item .bage {
  color: #FFFFFF;
  font-size: 8px;
  padding: 2px 5px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #006b65;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.song-container .content .item img {
  width: 120px;
  height: 120px;
  border-radius: 10px;
}

.song-container .content .item .title {
  color: #333333;
  font-size: 14px;
  font-weight: bolder;
  padding: unset;
  margin: unset;
  border: unset;
}

.song-container .content .item .message {
  color: #666666;
  font-size: 8px;
}

.active-container .content {
  display: flex;
  flex-direction: column;
}

.active-container .content .item {
  margin-bottom: 15px;
  display: flex;
}

.active-container .content .item img {
  width: 140px;
  height: 90px;
  margin-right: 15px;
  flex-shrink: 0;
  border-radius: 10px;
}

.active-container .content .item .message {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.active-container .content .item .message .title {
  color: #333333;
  font-size: 16px;
  font-weight: bolder;
  padding: unset;
  margin: unset;
  border: unset;
}

.active-container .content .item .message .detail {
  color: #666666;
  font-size: 12px;
  margin-top: 5px;
}

.search-input-container {
  padding: 0px 30px;
  margin-top: -36px;
  margin-bottom: 15px;
  position: relative;
}

.search-input {
  background-color: #FFFFFF;
  height: 30px;
  box-shadow: 0px 7px 16px 5px rgba(212, 220, 220, 0.52);
  border-radius: 10px;
  display: flex;
  padding: 5px;
}

.search-input .icon {
  color: #999999;
  width: 30px;
  margin-left: 5px;
}

.search-input input {
  display: block;
  flex-grow: 1;
  height: 30px;
  line-height: 30px;
}

.hiplay-container .title .tag-message {
  color: #999999;
  font-size: 10px;
}

.hiplay-container .title .tag-message .tag {
  color: #FF0000;
  background-color: #FFDDDD;
  padding: 0px 5px;
  margin-right: 5px;
  border-radius: 5px;
}

.hiplay-container .capsule {
  color: #FFFFFF;
  border-radius: 10px;
  display: flex;
  overflow: hidden;
  margin-bottom: 15px;
}

.hiplay-container .capsule .left {
  padding: 15px;
  flex-grow: 1;
  background-image: linear-gradient(#0066ff, #33aaff);
}

.hiplay-container .capsule .right {
  padding: 15px;
  flex-grow: 1;
  background-image: linear-gradient(#ff9900, #ffaa66);
}

.hiplay-container .capsule .title {
  color: #FFFFFF;
  font-weight: bold;
  border: unset;
  font-size: 14px;
  margin-bottom: 5px;
}

.hiplay-container .capsule .message {
  font-size: 12px;
}
</style>
